<template>
	<view class="min-h-[100vh] bg-background">
		<view class="bg-white sticky top-0 z-50">
			<up-tabs
				:list="tabs"
				@change="tabsChange"
				:scrollable="false"
				lineColor="#C39A71"
				:activeStyle="{ color: '#C39A71' }"
				:itemStyle="{ fontSize: '28rpx', height: '80rpx' }"
			></up-tabs>
		</view>
		<template v-if="comment.length">
			<view class="bg-white mt-[20rpx]">
				<view class="">
					<view class="pl-[20rpx]">
						<view class="p-[20rpx] pl-0 border-b border-background" v-for="item in comment" :key="item.id">
							<view class="flex items-center">
								<up-avatar :src="$setBaseUrl(item.userAvatar)" size="80rpx"></up-avatar>
								<view class="ml-[16rpx]">
									<view class="text-gray text-[26rpx] mb-[10rpx]">{{ item.userNick }}</view>
									<up-rate v-model="item.score" count="5" size="36rpx" gutter="16rpx" :readonly="true"></up-rate>
								</view>
							</view>
							<view class="pl-[96rpx]">
								<view class="text-[26rpx] my-[16rpx]">{{ item.content }}</view>
								<up-album :urls="$setBaseUrl(item.pic)" multipleSize="176rpx" :rowCount="3" space="24rpx"></up-album>
							</view>
						</view>
					</view>
				</view>
			</view>
			<up-loadmore :status="loadmore" />
		</template>
		<up-empty mode="list" marginTop="200rpx" text="暂无评论" v-else></up-empty>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import banner from '@/static/banner.png';
import { getGoodsComment, getGoodsCommentCount } from '@/config/api/goods';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad((options) => {
	if (options.id) {
		params.goodsId = options.id;
		getComment();
		getCommentCount();
	}
});
onReachBottom(() => {
	if (comment.value.length < params.total) {
		loadmore.value = 'loading';
		params.pageNum++;
		getComment();
	}
});
const tabs = ref([
	{
		name: '全部',
		status: 1,
		key: 'total'
	},
	{
		name: '有图',
		status: 2,
		key: 'pic'
	},
	{
		name: '好评',
		status: 3,
		key: 'good'
	},
	{
		name: '差评',
		status: 4,
		key: 'bad'
	}
]);
const comment = ref([]);
const loadmore = ref('loadmore');
const params = reactive({
	goodsId: 0,
	pageNum: 1,
	pageSize: 10,
	status: 1,
	total: 0
});
const tabsChange = (e) => {
	params.pageNum = 1;
	params.status = e.status;
	comment.value = [];
	getComment();
};
const getComment = async () => {
	// 调用接口获取数据
	try {
		const res = await getGoodsComment(params.goodsId, params);
		if (res.code == 200) {
			comment.value = comment.value.concat(res.rows);
			params.total = res.total;
			if (comment.value.length >= params.total) {
				loadmore.value = 'nomore';
			} else {
				loadmore.value = 'loading';
			}
		}
	} catch (error) {
		//TODO handle the exception
	}
};
const getCommentCount = async () => {
	try {
		const res = await getGoodsCommentCount(params.goodsId);
		if (res.code == 200) {
			tabs.value = tabs.value.map((item) => {
				return {
					...item,
					name: `${item.name}(${res.data[item.key]})`
				};
			});
		}
	} catch (error) {
		//TODO handle the exception
	}
};
</script>

<style scoped lang="scss"></style>
